//初始化
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 微软雅黑;
}
a{
    text-decoration: none;
    display: block;
    color: #000;
}
ul{
    list-style: none;
}
div{
    // border: solid 1px;
}
//自适应设置
@function vw($px:1){
    @return $px / 375 * 100vw;
}
@function vh($px:1) {
    @return $px / 667 * 100vh;
}

//容器样式
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    //head部分样式
    .head {
        width: 100%;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        flex-basis: vw(30);
        padding: vw(0) vw(10) vw(7);

        .esc,
        .share {
            flex-basis: vw(30);
            transform: rotate(180deg);
        }

        .head-text {
            flex: 1 1 auto;
            line-height: vw(30);
            text-align: center;
        }
    }
    .content{
        background-color: #fff;
        width: vw(345);
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title{
            margin-top: 26px;
            font-size: vw(24);
            color: #333;
        }
        .time{
            align-self: flex-start;
            margin-top: vw(12);
            margin-bottom: vw(17);
            font-size: vw(12);
            color: #9da3b4;
        }
        p{
            line-height: vw(28);
            margin-bottom: vw(15);
            color: #333;
            font-size: vw(17);
        }
        img{
            width: vw(355);
            margin-bottom: vw(15);
        }
        .picture{
            position: relative;
            .play{
                position: absolute;
                width: vw(50);
                height: vw(50);
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background: url(../imgs/播放@2x.png) no-repeat;
                background-size: 50px;
                &:hover{
                    cursor: pointer;
                }

            }
        }
        p:last-child{
            width: inherit;
            font-size: 0;
            align-self: flex-start;
            color: #5b5b5b;
            display: flex;
            span{
                font-size: vw(18);
            }
           img{
               margin-left: 40px;
                width: 30px;
           } 
        }
    }
}

//遮罩层
.mask{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: .5);
    z-index: 9;
    .share{
        width: vw(375);
        height: vw(221.5);
        background-color: #fff;
        position: absolute;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .to{
           font-size: 0;
            text-align: center;
            position: relative;
            width: vw(350);
            background-color: #fff;
            i{
                height: vw(18);
                line-height: vw(18);
                font-size: vw(12);
                display: inline-block;
                color: #666;
                padding: 0 vw(10);
                background-color: #fff;
                margin-top: 20px;
                position: relative;
                z-index: 9;
            }
            span{
                position: absolute;
                top: vw(26);
                left: 0;
                width: vw(350);
                display: inline-block;
                border-bottom: 1px solid #666;
            }
        }
        .cancel{
            width: inherit;
            text-align: center;
            padding: vw(15);
            border-top: 1px solid #666;
        }
    }
}